import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js";


//1渲染从详情页拿来得数据
function randerlist() {
    $.ajax({
        url: "http://10.31.155.17/wanmeishijie/src/php/alldata.php",
        dataType: "json",
    }).done(function (data) {
        // console.log(data)
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {//判断是否有localStorage的数据
            let arrsid = localStorage.getItem('localsid').split(',');//获取id名，用,分割
            let arrnum = localStorage.getItem('localnum').split(',');//获取数量，用,分割
            for (let i = 0; i < arrsid.length; i++){
                $.each(data, function (index,value) {
                    if (arrsid[i] == value.sid) {
                        let clonebox = $('.cartId:hidden').clone(true);//克隆所有的隐藏元素
                        clonebox.find('.name img').attr('src', value.url);//图片地址
                        clonebox.find('.title').html(value.title)//标题
                        clonebox.find('.price span').html((value.price * arrnum[i]).toFixed(2)).attr('data-pic',value.price)//价格
                        clonebox.attr('sid',value.sid)
                        clonebox.find('.num input').val(arrnum[i])//数量
                        clonebox.css('display', 'block');
                        $('.cartMain').append(clonebox);
                        calc()
                   }
                })
            }
            // console.log($('.cartMain'))
        }

    });




    //2 统计总数和总价 给予状态改变时调用
    function calc() {
        let arrcount = 0;
        let arrprice = 0;
        $('.cartId:visible').each(function (index,element) {
            if ($(this).find('input:checkbox').prop('checked')) { //检测是否选中选中
                arrcount += parseInt($(this).find('.num input').val());
                arrprice += parseFloat($(this).find('.price span').html());
            }
        });
        $('.foots').html(arrcount);
        $('.footpic').html(arrprice);
    }
    

    //3 全选按钮
    $('.allsel').on('click', function() {
        $('.cartId:visible').find('input:checkbox').prop('checked', $(this).prop('checked')); //当全选状态改变，复选也改变
        $('.allsel').prop('checked', $(this).prop('checked')); //同时另一个全选也改变
        calc(); //统计总价和数量
    });


    //3.1 复选按钮。当选中复选按钮的长度等于复选框的总长度时,全选状态随之改变
    $('.cartMain').on('click', '.state input', function() { //事件委托给父元素下得子元素，第二位参数为所要委托得元素
        let len1 = $('.cartId:visible').find('input:checkbox').length; 
        let len2 = $('.cartId:visible').find('input:checked').length; 
        if (len1 === len2) {
            $('.allsel').prop('checked', true);
        } else {
            $('.allsel').prop('checked', false);
        }
        calc(); //统计总价和数量
    });


    //4 改变数量


    //4.1+
    $('.numr').on('click', function () {
        let num = $(this).parents('.num').find('input').val()
        num++;
        $(this).parents('.num').find('input').val(num)
        // if (num > data.sailnumber) {
        //     num=data.sailnumber
        // }
        $(this).parents('.cartId').find('.price span').html(calcsingle($(this)));
        calc();

    });

    //4.2-
    $('.numl').on('click', function () {
        let num = $(this).next().val()
        num--;
        if (num < 1) {
            num = 1
        }
        $(this).next().val(num);
        $(this).parents('.cartId').find('.price span').html(calcsingle($(this)));
        calc();

    });

    //4.3 input输入

    $('.num input').on('input', function () {
        let reg = /^\d+$/;//定义正则匹配1或多个数字
        if (!reg.test($(this).val())) {//不符合正则匹配,为非数字或0
            $(this).val(1)//将数量设为1
        }

        $(this).parents('.cartId').find('.price span').html(calcsingle($(this)));
        calc();
        setlocalstorage($(this))


    })
    //封装当数量的状态被改变时 同时联动其他改变
    function calcsingle(obj) {
        let single =  obj.parents('.cartId').find('.price span').attr('data-pic');
        let num =parseInt(obj.parents('.cartId').find('.num input').val())
        return (single * num).toFixed(2);
    }

    //封装
    function setlocalstorage(obj) {
        let arrsid = [];
        let arrnum = [];
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
             arrsid = localStorage.getItem('localsid').split(','); //[1,2,4,3]
             arrnum = localStorage.getItem('localnum').split(','); //[10,20,40,30]
        }
        let sid = obj.parents('.cartId').attr('sid');
        let index = arrsid.indexOf(sid);
        arrnum[index] = obj.parents('.cartId').find('.num input').val();
        localStorage.setItem('localnum',arrnum)
    }


    
    // 5.点击删除单个，parents返回父级查找所需要删除的结构
    // 5.1.删除单个
    $('.operation a').on('click', function() {
        if (window.confirm('你确定要删除吗?')) {
            $(this).parents('.cartId').remove();
            calc();
            delstorage($(this).parents('.cartId').attr('sid'));
        }
    });

    // 5.2.删除多个
    $('.opera').on('click', function() {
        if (window.confirm('你确定要删除吗?')) { 
            $('.cartId:visible').each(function(index, element) { 
                if ($(this).find('input:checkbox').prop('checked')) { //判断选中的元素
                    $(this).remove();
                    calc();
                    delstorage($(this).attr('sid'));
                }
            });
        }
    });

    //删除本地存储
    function delstorage(sid) { 
        let index = null; 
        let arrsid = [];
        let arrnum = [];
        if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
            arrsid = localStorage.getItem('localsid').split(','); 
            arrnum = localStorage.getItem('localnum').split(','); 
        }
        index = arrsid.indexOf(sid); //位置
        arrsid.splice(index, 1); //删除对应的sid
        arrnum.splice(index, 1); //删除对应的商品数量

        localStorage.setItem('localsid', arrsid) //重新存储编号
        localStorage.setItem('localnum', arrnum) //重新存储数量
    }
}

export {
    randerlist
}